<template>
  <div class="container">
    <toolbar :back="true" :searchInput="true" rightText="搜索" @handleRightTextClick="search" @handleInputTextChange="textChange"></toolbar>
    <div class="t-container _m-2" >
      <search-history></search-history>
      <search-list v-if="searchList" :searchValue="searchValue"></search-list>
    </div>
  </div>  
</template>

<script>
import Toolbar from "../../components/Toolbar";
import SearchHistory from './components/SearchHistory'
import SearchList from './components/Search'

import {mapMutations, mapState} from 'vuex'

export default {
  name: 'Search',
  components: {
    Toolbar,
    SearchHistory,
    SearchList
  },
  data () {
    return {
      searchValue: '',
      searchList: false
    }
  },
  computed: {
		...mapState([
			'searchHistoryList',
		]),
    getSearchList() {
      let searchList = [];
			if(this.searchHistoryList) {
				searchList = JSON.parse(this.searchHistoryList);
			}
			return searchList;
    }
  },
  methods: {
    search () {
      if(this.searchValue != null && this.searchValue != "") {
        this.searchList = true
        let item = this.getSearchList.find(item => {
          return item == this.searchValue
        });

        if(item == undefined) {
          this.saveSearchHistory(this.searchValue);
        }
      }
    },
    textChange (value) {
      this.searchValue = value
    },
    ...mapMutations(["saveSearchHistory"])
  }
}
</script>

<style lang="stylus" scoped>

</style>
